<!--  -->
<template>
  <div>
    <quill-editor style="padding: 10px 0;"
                  :name="scriptItem.id"
                  ref="myTextEditor"
                  :hint="scriptItem.hint"
                  :placeholder="scriptItem.placeholder"
                  :label="scriptItem.label"
                  v-model="dataForm[scriptItem.text]"
                  :options="editorOption"></quill-editor>
    <div class="quill-footer-css">
        <div>
        <label for="">{{$t('statement.ct')}}</label>
        <el-select v-model="templateId"
                  filterable
                  clearable
                  :placeholder="scriptItem.hint"
                  default-first-option>
          <div class="template-page-link el-select-dropdown__item"
              @click="routerToTemplatePage">{{$t('statement.mmt')}}</div>
          <el-divider class="split-line"></el-divider>
        
          <el-option v-for="(o,ii) in selectDataObj[`${scriptItem.text}ListsOrigin`]"
                    :key="ii"
                    :value="o[scriptItem.fieldValue]"
                    :label="o[scriptItem.fieldLabel]"></el-option>
        </el-select>
      </div>
      <el-popover placement="top"
                  width="205"
                  @hide="clearPopover"
                  v-model="editTemplatePopover">
        <el-form :model="editTemplateForm"
                 :rules="dataRule"
                 size="mini"
                 ref="template-form"
                 label-position="top">
          <el-form-item :label="$t('label.tn')"
                        prop="name">
            <el-input v-model="editTemplateForm.name"
                      :placeholder="$t('placeholder.pe')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('label.tt')"
                        prop="type">
            <!-- <el-input v-model="editTemplateForm.type"
                      placeholder="Please Select"></el-input> -->
            <el-select v-model="editTemplateForm.type"
                       :placeholder="$t('placeholder.ps')">
              <el-option v-for="its in ['teams_message']"
                         :key="its"
                         :label="its"
                         :value="its"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="viewTemplatePage">{{$t('statement.vaa')}}</el-checkbox>
          </el-form-item>
        </el-form>
        <div class="popover-footer-btn">
          <el-button size="mini"
                     @click="editTemplatePopover = false">{{$t('attribute.close')}}</el-button>
          <el-button size="mini"
                     type="primary"
                     :loading='addBtnLoading'
                     @click="addMessageTemplate">{{$t('attribute.add')}}</el-button>
        </div>
        <el-button size="mini"
                   type="primary"
                   plain
                   style="margin-right:15px;padding:7px;border:none;"
                   slot="reference">
          <span
                style="fontSize:14px;">{{$t('statement.saat')}}</span>
        </el-button>
      </el-popover>
    </div>
    
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  mixins: [mixinTypeViewModule],
  props: {
    blockInfo: {
      type: Object,
      default: () => { }
    }
  },
   watch: {
    templateId (val) {
      if (val) {
        try {
          this.dataForm[this.scriptItem.text] = this.selectDataObj[`${this.scriptItem.text}ListsOrigin`].find(e => e[this.scriptItem.fieldValue] === this.templateId)[this.scriptItem.templateFields]
        } catch (error) { }
      }
    }
  },
  data () {
    return {
      editorOption: {
        name: '232',
        modules: {
          toolbar: [
            ['code-block'],
            [{ 'direction': 'rtl' }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'color': [] }],
            [{ 'background': [] }],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'font': ['sans-serif', 'monospace', 'serif'] }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'align': [] }],
            ['link'],
            ['clean']
          ]
        },
        theme: 'snow',
        placeholder: ''
      },
      tempLoadDefault: {},
       templateId: null,
       editTemplatePopover: false,
       editTemplateForm: {
        name: null,
        type: null
      },
      dataRule: {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur', pattern: '[^ \x22]+' },
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        type: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      },
      viewTemplatePage: false,
      addBtnLoading: false,
    }
  },
  created () {
    try {
      this.tempLoadDefault = { ...this.blockInfo.paramsValue }
    } catch (error) {
      this.tempLoadDefault = {}
    }
  },
  methods: {
    loadDefault (text) {
      try {
        try {
          if (this.blockInfo.sysParamsValue) {
            this.blockInfo.paramsValue[text] = this.blockInfo.sysParamsValue[text]
          } else {
            this.dataForm[this.scriptItem.text] = this.scriptItem.defaultValue
          }
        } catch (error) {
          this.blockInfo.paramsValue[text] = this.tempLoadDefault[text]
        }
      } catch (error) {
      }
    },
    clearPopover () {
      this.$refs['template-form'].resetFields()
      this.viewTemplatePage = false
    },
     addMessageTemplate () {
      this.$refs['template-form'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.addBtnLoading = true
        const params = {
          template: this.dataForm[this.scriptItem.text] || '',
          ...this.editTemplateForm
        }
        this.$interface.schedule.saveTemplateInfoApi(params)
          .then(({ data: res }) => {
            this.addBtnLoading = false
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            this.$message.success(res.msg)
            this.editTemplatePopover = false
            this.init()
            this.viewTemplatePage && this.routerToTemplatePage()
          }).catch(() => {
            this.addBtnLoading = false
          })
      })
    },
      routerToTemplatePage () {
      this.$confirm(this.$t('custom.leaveTips'), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(() => {
          this.$emit('hiddenSettingModel')
          this.$root.eventBus.$emit('viewAfterAdding')
          this.$router.push({
            name: 'mspbots-template-management-email-and-message-index'
          })
        })
        .catch(() => { })
    },
  }
}
</script>

<style scoped lang='scss'>
.quill-footer-css {
  // border: 1px solid #ccc;
  margin-top: 10px;
  border-top: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  input {
    border: none;
    &::-webkit-input-placeholder {
      color: $--theme-color !important;
    }
  }
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
  .el-popover .el-select {
    width: 100%;
  }
}
</style>
